<!-- pages/login/components/mobile.vue -->
<script setup lang="ts">
  import { ref } from 'vue'
  import { request } from '@/utils/http'
  import { getCodeAPI, loginByCodeAPI } from '@/apis/user'
  import type { CodeType, UserType } from '@/types/user'
  import { useUserStore } from '@/stores/user'
  const store = useUserStore() // store.user   store.setUser(....)

  // const mobile = ref('13211112222')
  const formValue = ref({
    // 这个数据将来要提交给后端 不能乱写字段的!!  跟接口文档对齐
    mobile: '13211112222',
    code: '123456',
  })

  // 客户端层面收集的登录数据 => 验证
  // 1. 手机号不能空  验证码不空
  // 2. 手机号符合格式  验证码

  // 这种明显的错误  客户端层面验证  阻止发无效的请求

  // 告诉表单 如何验证数据
  // 对象 => 针对你验证的字段名 添加规则
  const rules = {
    // 对mobile字段进行必填验证
    mobile: {
      // mobile 的规则是个数组
      rules: [
        // 规则1
        {
          required: true, // 必填 非空
          errorMessage: '手机号不能为空',
        },
        // 规则2
        {
          // minLength: 11,
          // maxLength: 11,
          pattern: /^1[3-9]\d{9}$/, // 正则
          errorMessage: '手机号必须符合中国大陆手机号格式',
        },
      ],
    },
    // 对email字段进行必填验证
    code: {
      // 验证码 非空   6位数字
      rules: [
        // 规则1 非空
        {
          required: true,
          errorMessage: '验证码都不填',
        },
        // 规则2
        {
          pattern: /^\d{6}$/,
          errorMessage: '验证码6位数字',
        },
      ],
    },
  }

  const submit = async () => {
    // 验证通过了 才能发请求
    // 验证有一个方法  在uni-forms组件身上
    // 获取这组件  才能拿到这个方法

    // 这个验证函数返回一个promise
    // 验证通过 promise 成功
    // 验证失败 promise 失败
    // formRef.value
    //   .validate()
    //   .then(() => {
    //     // 验证成功
    //   })
    //   .catch(() => {
    //     // 验证失败
    //   })

    try {
      await formRef.value.validate()
      // console.log('登录请求')
      if (!isAgree.value) {
        uni.showToast({ title: '你同意一下', icon: 'none' })
        return
      }

      // 请求登录
      // post 函数的第二个参数本身就是在描述接口文档上的body参数
      const res = await loginByCodeAPI(formValue.value)

      // console.log(res)
      store.setUser(res) // 将数据更新到仓库(持久化效果)

      uni.showToast({
        title: '登录成功',
        icon: 'none',
      })
      // uni.navigateTo({
      //   url: '',
      // });
      // 专用于tabbar页面跳转
      uni.switchTab({
        url: '/pages/index/index',
      })
    } catch (error) {
      console.log('失败', error)
    }

    // console.log('发请求啦')
  }

  const formRef = ref() // 创建组件的引用(标记)   formRef.value就是当前组件

  // 定义一个显示隐藏倒计时的状态
  const showCountdown = ref(false)

  // 获取验证码
  const getCode = async () => {
    // 1.验证手机号
    // formRef.value.validate() // 整体验证
    await formRef.value.validateField(['mobile']) // 单独验证手机号
    // console.log('成功, 准备获取验证码')

    // 2.请求验证码
    // 理论上这里不会拿到后端返回的验证码  因为极其容易被拦截 被别人看到
    // 这里返回的原因是方便测试
    const res = await getCodeAPI(formValue.value.mobile, 'login')
    // console.log(res.code)
    uni.showToast({
      title: '请查看手机短信',
      icon: 'none',
    })
    formValue.value.code = res.code // 方便  直接将后端返回的验证码直接写在输入框

    // 3. 开启倒计时
    showCountdown.value = true
  }

  // 是否同意
  const isAgree = ref(false)
</script>

<template>
  <!-- 
     rules  提供规则
     model  提供整表单数据对象
  -->
  <uni-forms ref="formRef" :rules="rules" :model="formValue" class="login-form">
    <!-- 需要设置 name 属性为当前字段名  -->
    <uni-forms-item name="mobile">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        v-model="formValue.mobile"
        placeholder-style="color: #C3C3C5"
      />
    </uni-forms-item>

    <uni-forms-item name="code">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        v-model="formValue.code"
        placeholder="请输入验证码"
        placeholder-style="color: #C3C3C5"
      />
      <text v-if="!showCountdown" class="text-button" @click="getCode"> 获取验证码 </text>
      <!-- :showDay="false" 关闭倒计时天数的显示 -->
      <view v-else class="text-button">
        <uni-countdown
          @timeup="showCountdown = false"
          :showDay="false"
          :showHour="false"
          :showMinute="false"
          :second="59"
        />
        秒后重新发送
      </view>
    </uni-forms-item>

    <view class="agreement">
      <radio :checked="isAgree" @click="isAgree = !isAgree" color="#16C2A3" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="submit">登 录</button>
  </uni-forms>
</template>

<script lang="ts">
  // 样式如果无法穿透到组件内部时  ::v-deep
  export default {
    options: {
      styleIsolation: 'shared', // 样式共享   !important
    },
  }
</script>

<style lang="scss">
  @import '../styles.scss';
</style>
